<template>
    <div class="tab_bar">
        <van-row class="tabbar" type="flex" justify="space-between">
            <van-col span="6">
                <img
                    @click="menu = true"
                    src="~assets/imgs/global/menu.svg"
                    alt=""
                />
            </van-col>
            <van-col span="12">
                <van-tabbar route class="tab" v-model="activetab">
                    <van-tabbar-item to="/music">乐</van-tabbar-item>
                    <van-tabbar-item to="/read">阅</van-tabbar-item>
                    <van-tabbar-item to="/share">享</van-tabbar-item>
                </van-tabbar>
            </van-col>
            <van-col span="6" class="searchi">
                <van-icon name="search" size="0.8rem" />
            </van-col>
        </van-row>
        <div class="menu" v-if="menu">
            <van-row type="flex" class="loginstates">
                <van-col span="2" offset="3" class="fase">
                    <img
                        v-if="!status"
                        src="~assets/imgs/global/my.svg"
                        alt=""
                    />
                    <img v-else src="" alt="" />
                </van-col>
                <van-col span="8" offset="2">
                    <span v-if="!login">
                        <router-link to="/signin">登录 / 注册</router-link>
                    </span>
                    <span v-else>尊敬的用户</span>
                </van-col>
                <van-col span="2" offset="4">
                    <img
                        @click="menu = false"
                        src="~assets/imgs/global/right.svg"
                        alt=""
                    />
                </van-col>
            </van-row>
            <div class="body">
                <van-row>
                    <!-- <van-col span="2" offset="2">
                        <img src="~assets/imgs/global/mail.svg" alt="" />
                    </van-col>
                    <van-col span="8" offset="2">
                        消息中心
                    </van-col>
                    <van-col offset="5">
                        <img src="~assets/imgs/global/return.svg" />
                    </van-col> -->
                </van-row>
                <van-divider></van-divider>
                <van-row>
                    <!-- <van-col span="2" offset="2">
                        <img src="~assets/imgs/global/setting.svg" alt="" />
                    </van-col>
                    <van-col span="8" offset="2">
                        主题设置
                    </van-col>
                    <van-col offset="5">
                        <img src="~assets/imgs/global/return.svg" />
                    </van-col> -->
                </van-row>
                <van-divider></van-divider>
                <van-row @click="about = true">
                    <van-col span="2" offset="2">
                        <img src="~assets/imgs/global/about.svg" alt="" />
                    </van-col>
                    <van-col span="8" offset="2">
                        关于悦享
                    </van-col>
                    <van-col offset="5">
                        <img src="~assets/imgs/global/return.svg" />
                    </van-col>
                </van-row>
                <van-divider></van-divider>
            </div>
            <van-row class="model">
                <van-row>
                    <!-- <van-col>
                        <img src="~assets/imgs/global/moon.svg" alt="" />
                    </van-col>
                    <van-col>夜间模式</van-col> -->
                </van-row>
                <van-row v-if="status">
                    <van-row>
                        <van-col>
                            <img src="~assets/imgs/global/exit.svg" alt="" />
                        </van-col>
                        <van-col @click="logout">退出登录</van-col>
                    </van-row>
                </van-row>
            </van-row>
        </div>
        <div class="about" v-if="menu && about">
            <van-nav-bar
                title="关于悦享"
                left-arrow
                @click-left="about = !about"
            />
            <div class="about_body">
                <img class="logo" src="~assets/imgs/global/logo.png" alt="" />
                <van-row class="item">
                    <van-col span="2" offset="2">
                        <img src="~assets/imgs/global/up.svg" alt="" />
                    </van-col>
                    <van-col span="14" offset="2">
                        当前版本 V1.0.0
                    </van-col>
                    <van-col span="2">
                        <img src="~assets/imgs/global/return.svg" alt="" />
                    </van-col>
                </van-row>
                <van-row class="item">
                    <van-col span="2" offset="2">
                        <img src="~assets/imgs/global/mail.svg" alt="" />
                    </van-col>
                    <van-col span="14" offset="2">
                        联系我们 1534414811@qq.com
                    </van-col>
                    <van-col span="2">
                        <img src="~assets/imgs/global/return.svg" alt="" />
                    </van-col>
                </van-row>
            </div>
            <div class="copyright">
                <p>服务条款|隐私政策|版权声明|版权所有</p>
                <p>Copyright©2020 YueXiangApp</p>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "TabBar",
    data() {
        return {
            activetab: 0,
            menu: false,
            status: true,
            about: false,
        };
    },
    methods: {
        logout() {
            this.$store.commit("removeLogin");
        },
    },
    computed: {},
    computed: mapState(["login"]),
};
</script>

<style lang="less" scoped>
.tab_bar {
    position: relative;
    line-height: 1rem;
    .tabbar {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
        width: 100vw;
        overflow: hidden;
        height: 1rem;
        background-color: #f3f3f2;
        .searchi i {
            float: right;
            margin: 0.1rem 0;
            cursor: pointer;
        }
        .van-tabbar--fixed {
            position: static;
            background-color: #f3f3f2;
            .van-tabbar-item {
                height: 1rem;
                font-size: 0.5rem;
            }
            .van-tabbar-item--active {
                color: black;
                background-color: #f3f3f2;
                transition-duration: 0.05s;
                transform: scale(1.3) translateZ(0);
            }
        }
        img {
            cursor: pointer;
            width: 0.8rem;
            margin: 0.1rem 0;
        }
    }
    .menu {
        width: 100vw;
        height: 100vh;
        background-color: white;
        position: absolute;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
        line-height: 1rem;
        font-size: 0.4rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        img {
            display: block;
            width: 0.6rem;
            margin: 0.2rem;
        }
        .loginstates {
            padding: 0 0.6rem;
            height: 1rem;
            background-color: #f3f3f2;
            .fase {
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
            }
        }
        .body {
            flex: 1;
            overflow-y: scroll;
            margin-bottom: 1rem;
            padding-top: 2rem;
        }
        .model {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            height: 1rem;
            background-color: #f3f3f2;
        }
    }
    .about {
        width: 100vw;
        height: 100vh;
        background-color: white;
        position: absolute;
        z-index: 100;
        overflow-y: scroll;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: 0.8rem;
        font-size: 0.2rem;
        display: flex;
        flex-direction: column;
        img {
            margin: 0.2rem;
            width: 0.4rem;
        }
        .about_body {
            flex: 1;
            overflow-y: scroll;
            margin-bottom: 1.5rem;
            .logo {
                display: block;
                width: 2rem;
                height: 2rem;
                margin: 0.4rem auto 1rem;
            }
            .item {
                width: 80%;
                height: 1rem;
                margin: 0 auto;
                border-bottom: 1px solid black;
            }
        }

        .copyright {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 1.5rem;
            line-height: 0.5rem;
            text-align: center;
        }
    }
}
</style>
